const app = Vue.createApp({
    setup(){
        const {ref,reactive,onMounted,onUpdated} = Vue
        // 当前日期
        let today = ref("")

        // 任务数量
        let item_count = ref(0)

        // 添加任务
        let addSome = ref("")
        // 所有数组
        let isAll = ref(true)
        let all_items = reactive({})

        // 未完成数组
        let isActive = ref(false)
        let active_items = reactive({})
        let activeArry = [
            {
                name:"明天上午去上课",
                isF:false
            },
            {
                name:"周末去游泳",
                isF:false
            },
            {
                name:"周末1111去游泳",
                isF:false
            },
            {
                name:"周末1333611去游泳",
                isF:false
            }
        ]
    
        // 已完成数组
        let isCompleted = ref(false)
        let completed_items = reactive({})
        let completedArry = [
            {
                name:"后天放学去爬上",
                isF:true
            },
            {
                name:"后天放1111学去爬上",
                isF:true
            },
            {
                name:"后天3232232放学去爬上",
                isF:true
            }
        ]

        onMounted(() => {
            // 获取当前日期
            var str1 = new Date
            var str2 = str1.toString()
            today.value = str2.substring(0,15)

            // 初始化未完成任务
            active_items.value = activeArry

            // 初始化已完成任务
            completed_items.value = completedArry
            
            // 初始化所有任务
            all_items.value = active_items.value.concat(completed_items.value)
        })

        onUpdated(() => {
            // 更新各个列表的任务数量
            if(isAll.value == true){
                item_count.value = all_items.value.length
            }
            if(isActive.value == true){
                item_count.value = active_items.value.length 
            }
            if(isCompleted.value == true){
                item_count.value = completed_items.value.length 
            }

            
        })

        // 添加任务
        let addTask = ()=>{
            if(addSome.value != ""){
                active_items.value.push({
                name:addSome.value,
                isF:false
                })
                this.activeNothing = false
            }
            all_items.value = active_items.value.concat(completed_items.value)
        }

        // 切换到All列表
        let goAll = () => {
            isAll.value = true
            isActive.value = false
            isCompleted.value = false
        }
            
        // 切换到Active列表
        let goActive = () => {
            isAll.value = false
            isActive.value = true
            isCompleted.value = false
        }

        // 切换到Completed列表
        let goCompleted = () => {
            isAll.value = false
            isActive.value = false
            isCompleted.value = true
        }

        // 删除任务
        const deleteTask = (i) => {

            // 所有任务列表
            if(isAll.value == true){
                if(all_items.value[i].isF == false){
                    active_items.value.splice(i,1)
                    all_items.value = active_items.value.concat(completed_items.value)
                }
                else if(all_items.value[i].isF == true){
                    console.log(i)
                    completed_items.value.splice(i-active_items.value.length,1)
                    all_items.value = active_items.value.concat(completed_items.value)
                }
            }

            // 未完成任务列表
            if(isActive.value == true){
                active_items.value.splice(i,1)
                all_items.value = active_items.value.concat(completed_items.value)
            }

            // 未完成任务列表
            if(isCompleted.value == true){
                completed_items.value.splice(i-active_items.value.length,1)
                all_items.value = active_items.value.concat(completed_items.value)
            }
            
        }

        // 任务是否完成
        const isFinish = (i) =>{
            if(isAll.value == true){
                if(all_items.value[i].isF == false){
                    all_items.value[i].isF = !all_items.value[i].isF
                    completed_items.value.push(all_items.value[i])
                    active_items.value.splice(i,1)
                }
                if(all_items.value[i].isF == true){
                    all_items.value[i].isF = !all_items.value[i].isF
                    active_items.value.push(all_items.value[i])
                    completed_items.value.splice(i,1)
                }
            }
            if(isActive.value == true){
                let arr1 = active_items.value[i]
                arr1.isF = !arr1.isF
                console.log(arr1)
                active_items.value.splice(i,1)
                completed_items.value.push(arr1)
            }
            if(isCompleted.value == true){
                let arr2 = completed_items.value[i]
                arr2.isF = !arr2.isF
                console.log(arr2)
                completed_items.value.splice(i,1)
                active_items.value.push(arr2)
            }
        }

        return{
            today,
            item_count,
            // 添加任务
            addSome,
            addTask,

            // 所有的
            all_items,
            isAll,
            goAll,

            // 未完成的
            active_items,
            isActive,
            goActive,

            // 已完成的
            completed_items,
            isCompleted,
            goCompleted,

            deleteTask,
            isFinish

        }
    }
})
// 定义选项卡全局组件
app.component('my-list', {
    props:[
        "items",
    ],
    methods:{
        deletetask(index){
            this.$emit('abc',index)
        },
        isfinish(index){
            this.$emit('abb',index)
        }
    },
    template: `
    <div class="task-list">
        <div class="task-item" v-for="(item,index) in items" :key="index">
            <input type="checkbox" class="task-status" v-model="item.isF" @Click="isfinish(index)">
            <label for="" :class="{task_name:true,completed:item.isF}">{{item.name}}</label>
            <button class="task-delete" @Click="deletetask(index)"></button>
        </div>
    </div>
    `
     
})
var vm = app.mount("#taskList")